<template>
	<view class="wrap">
		<image src="/static/logo.png" class="logo" mode=""></image>
		<text class="logo-title">车搭档</text>
		<view class="box">
			<view class="item">
				<input type="number" v-model="form.phone" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<input type="number" v-model="form.code" placeholder="请输入验证码" />
				<text @click="handleGetCode">{{codeStr}}</text>
			</view>
		</view>
		<button class="one" @click="submit">登录</button>

		<view class="footer">
			<image :src="state?'/static/l1.png':'/static/radio.png'" @click="state=!state" mode=""></image>
			<text @click="state=!state">我已认真阅读并同意</text>
			<text style="color:#FE9C24 ;">《用户协议》</text>
			<text>与</text>
			<text style="color:#FE9C24 ;">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		sendCode,
		loginCode
	} from '@/api'
	import {wxOpenid} from '@/utils/login-sdk.js'
	const codeStr = ref('获取验证码')
	const user = uni.getStorageSync('wxuser')
	const codeNum = ref(60)
	let bok = true
	const state = ref(false)
	const form = reactive({
		code: "",
		phone: "",
		openId: ""
	})
	/** 获取验证码*/
	const handleGetCode = async () => {
		if (!form.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return false
		}
		var reg = /^1[34578]\d{9}$/;

		if (!reg.test(form.phone)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none'
			})
			return false
		}
		if (!bok) return false;
		bok = false

		const timer = setInterval(() => {
			codeNum.value--

			codeStr.value = `${codeNum.value}秒后重试`
			if (codeNum.value <= 0) {

				clearInterval(timer)
				codeStr.value = `重新获取`
				codeNum.value = 60
				bok = true
			}
		}, 1000)
		try{
			const res = await sendCode({
				param: form.phone
			})
		}catch(e){
			clearInterval(timer)
			codeStr.value = `重新获取`
			codeNum.value = 60
			bok = true
		}
		
		
		

	}
	/** 登录 */
	const submit = async() => {

		if (!state.value) {
			uni.showModal({
				title: '提示',
				content: '确认同意用户协议和隐私政策',
				success: (ret) => {
					if (ret.confirm) {
						state.value = true
					}
				}
			})
			return false
		}
		if (!form.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return false
		}
		const {openId} = await wxOpenid()
		form.openId = openId
		const res = await loginCode(form)
		user.jwt = res.result.jwt
		user.phone = res.result.phone
		user.memberId = res.result.memberId
		uni.setStorageSync('wxuser',user)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
</script>

<style lang="scss">
	.wrap {
		margin-top: 140rpx;

		.logo {
			width: 218rpx;
			height: 218rpx;
			border-radius: 50%;
			display: block;
			margin: 0 auto 26rpx;
		}

		.logo-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #16191B;
			line-height: 1;
			display: block;
			text-align: center;
			margin-bottom: 132rpx;
		}

		.box {
			width: 640rpx;
			margin: 0 auto 43rpx;

			.item {
				width: 580rpx;
				height: 100rpx;
				background: rgba(203, 203, 203, 0.28);
				border-radius: 28rpx;
				margin-bottom: 25rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				text {
					font-size: 30rpx;
					color: #484848;
				}

				input {
					font-size: 30rpx;
					color: #333;
				}
			}
		}

		.one {
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
			border-radius: 28rpx;
			display: block;
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 100rpx;
		}

		.footer {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			justify-content: center;

			image {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			text {
				color: #6E6E6E;
				font-size: 24rpx;
			}
		}
	}
</style>